import { Card } from 'antd';
import AMapLoader from '@amap/amap-jsapi-loader';
import { useEffect } from 'react';

let map: any;
const Index = () => {
  useEffect(() => {
    AMapLoader.load({
      key: '9022ce67870ce2f421c2b6de11f57de4', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          // zoom: 16, //级别 0 - 20
          center: [120.26408, 30.305451], //中心点坐标
          viewMode: '3D', //使用3D视图
        });
        //实时路况图层
        // const satellite = new AMap.TileLayer.Satellite({
        //   zIndex: 10,
        // });
        // map.add(satellite); //添加图层到地图

        const marker = new AMap.Marker({
          position: [120.26408, 30.305451], //位置
          // icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        });
        map.add(marker); //添加到地图

        const lineArr = [
          [120.26408, 30.305451],
          [120.264252, 30.305796],
          [120.266322, 30.306037],
          [120.266403, 30.307843],
          [120.26268, 30.30795],
        ];
        const polyline = new AMap.Polyline({
          path: lineArr, //设置线覆盖物路径
          strokeColor: '#3366FF', //线颜色
          strokeWeight: 5, //线宽
          strokeStyle: 'solid', //线样式
        });
        map.add(polyline);

        map.on('click', (e: any) => {
          // console.log(e);
          // const marker = new AMap.Marker({
          //   position: [e.lnglat.lng, e.lnglat.lat], //位置
          // });
          // map.add(marker); //添加到地图
          var position = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat); // 标准写法
          // 简写 var position = [116, 39];
          map.setCenter(position);
        }); //绑定click事件

        // AMap.plugin('AMap.ToolBar', function () {
        //   //异步加载插件
        //   const toolbar = new AMap.ToolBar();
        //   map.addControl(toolbar);
        // });
        // AMap.plugin('AMap.Scale', function () {
        //   //异步加载插件
        //   const scale = new AMap.Scale();
        //   map.addControl(scale);
        // });
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          //异步加载插件
          const toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
          const scale = new AMap.Scale();
          map.addControl(scale);
        });

        // 构造矢量圆形
        const circle = new AMap.Circle({
          center: new AMap.LngLat('120.266397', '30.307755'), // 圆心位置
          radius: 1000, //半径
          strokeColor: '#F33', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 3, //线粗细度
          fillColor: '#ee2200', //填充颜色
          fillOpacity: 0.35, //填充透明度
        });
        map.add(circle);

        map.on('complete', function () {
          // 地图图块加载完成后触发
          console.log('地图加载完成了');
          // 尽可能大的显示所有的点坐标和矢量图形
          map.setFitView();
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      // 销毁地图，并清空地图容器
      map.destroy();
      console.log('地图被销毁了');
    };
  }, []);
  return (
    <>
      <Card title="地图">
        <div id="container" style={{ height: 400 }}></div>
      </Card>
    </>
  );
};

export default Index;
